

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  // 用于存储数据，组件中使用this.$store.state.name调用数据
  state: {
    num: 0,
    id: "hello",
    arr: [{
      name: "张三",
      age: 18
    }, {
      name: "李四",
      age: 19
    }, {
      name: "王五",
      age: 20
    },]
  },
  // 用于对state中的数据进行加工处理，使用方法类似于计算属性，fn(state){}，需要return，使用当成变量使用$store.getter.fn
  getters: {
    id(state) {
      return state.id + " world"
    }
  },
  // 操作修改数据，在组件中调用$store.dispatch("函数名fn（在actions中使用）",参数)来定义操作数据的函数
  mutations: {
    // 在actions中转一圈之后调用函数fn(state,参数){}
    adder(state, value) {
      state.arr.push(value)
    },
    ad(state, value) {
      state.num = state.num + value
    },
    su(state, value) {
      state.num = state.num - value
    }
  },
  // 入口，用于响应组件中的动作，通过fn(仓库信息对象a,参数){}结合仓库信息对象的commit("函数名fn",参数)方法来链接mutations
  actions: {
    adder(a, value) {
      a.commit("adder", value)
    },
    ad(a, value) {
      a.commit("ad", value)
    },
    su(a, value) {
      a.commit("su", value)
    }
  },
  // 用于分化模块，可以将其他四个方法声明成一个变量，允许存在多组数据模块，
  // 分完之后每个模块要加上namespaced=true，
  // 调用方式变成...mapState/mapGetters("模块变量名称",["要使用的变量名称"])
  modules: {
  }
})
